{% extends 'v2ray/base.html' %}
{% block title %}{{ _('system status') }}{% endblock %}
{% block head %}
    {{ super() }}
    <style>
        .ant-col-sm-24 {
            margin-top: 10px;
        }
    </style>
{% endblock %}
{% block body %}

    <a-layout id="app" v-cloak>
        {% include 'v2ray/common_sider.html' %}
        <a-layout id="content-layout">
            <a-layout-content>
                <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
                <transition name="list" appear>
                <a-row>
                    <a-card hoverable>
                        <a-row>
                            <a-col :sm="24" :md="12">
                                <a-row>
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.cpu.color"
                                                    :percent="status.cpu.percent"></a-progress>
                                        <div>CPU</div>
                                    </a-col>
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.memory.color"
                                                    :percent="status.memory.percent"></a-progress>
                                        <div>{{ _('memory') }}: [[ sizeFormat(status.memory.used) ]] /
                                            [[ sizeFormat(status.memory.total) ]]</div>
                                    </a-col>
                                </a-row>
                            </a-col>
                            <a-col :sm="24" :md="12">
                                <a-row>
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.swap.color"
                                                    :percent="status.swap.percent"></a-progress>
                                        <div>swap: [[ sizeFormat(status.swap.used) ]] /
                                            [[ sizeFormat(status.swap.total) ]]</div>
                                    </a-col>
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.disk.color"
                                                    :percent="status.disk.percent"></a-progress>
                                        <div>{{ _('disk') }}: [[ sizeFormat(status.disk.used) ]] /
                                            [[ sizeFormat(status.disk.total) ]]</div>
                                    </a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                    </a-card>
                </a-row>
                </transition>
                <transition name="list" appear>
                <a-row>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable>
                            xray {{ _('status') }}: <a-tag :color="status.v2.color">[[ status.v2.stat ]]</a-tag>
                            <a-tooltip v-if="status.v2.stat === '{{ _('error') }}'">
                                <template slot="title">
                                    <p v-for="line in status.v2.error_msg.split('\n')">[[ line ]]</p>
{#                                    <p>{{ _('May be due to account information configuration error caused by v2ray startup failure.') }}</p>#}
{#                                    <p>{{ _('Check the account information and the v2ray configuration template for errors, or determine the cause based on the v2ray error message.') }}</p>#}
{#                                    <p>{{ _('If v2ray is running and all accounts are available, ignore this error..') }}</p>#}
                                </template>
                                <a-icon type="question-circle" theme="filled"></a-icon>
                            </a-tooltip>
                            <a-tag color="green" @click="openSelectV2rayVersion">[[ status.v2.version ]]</a-tag>
                            <a-tag color="blue" @click="openSelectV2rayVersion">{{ _('Switch version') }}</a-tag>
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable>
                            {{ _('uptime') }}: <a-tag color="#87d068">[[ status.uptime ]]</a-tag>
                            <a-tooltip>
                                <template slot="title">
                                    {{ _('The running time of the system since boot.') }}
                                </template>
                                <a-icon type="question-circle" theme="filled"></a-icon>
                            </a-tooltip>
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable>
                            {{ _('loads') }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable>
                            tcp / udp {{ _('connections') }}: [[ status.tcp_count ]] / [[ status.udp_count ]]
                            <a-tooltip>
                                <template slot="title">
                                    {{ _('The number of connections for the entire system, not xray.') }}
                                </template>
                                <a-icon type="question-circle" theme="filled"></a-icon>
                            </a-tooltip>
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable>
                            <a-row>
                                <a-col :span="12">
                                    <a-icon type="arrow-up"></a-icon> [[ status.net_io.up ]] / S
                                    <a-tooltip>
                                        <template slot="title">
                                            {{ _('Total upload speed of all NICs.') }}
                                        </template>
                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
                                </a-col>
                                <a-col :span="12">
                                    <a-icon type="arrow-down"></a-icon> [[ status.net_io.down ]] / S
                                    <a-tooltip>
                                        <template slot="title">
                                            {{ _('Total download speed of all NICs.') }}
                                        </template>
                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
                                </a-col>
                            </a-row>
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
                        <a-card hoverable>
                            <a-row>
                                <a-col :span="12">
                                    <a-icon type="cloud-upload"></a-icon> [[ status.net_traffic.sent ]]
                                    <a-tooltip>
                                        <template slot="title">
                                            {{ _('Total upload traffic for all NICs since boot.') }}
                                        </template>
                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
                                </a-col>
                                <a-col :span="12">
                                    <a-icon type="cloud-download"></a-icon> [[ status.net_traffic.recv ]]
                                    <a-tooltip>
                                        <template slot="title">
                                            {{ _('Total download traffic for all NICs since boot.') }}
                                        </template>
                                        <a-icon type="question-circle" theme="filled"></a-icon>
                                    </a-tooltip>
                                </a-col>
                            </a-row>
                        </a-card>
                    </a-col>
                </a-row>
                </transition>
            </a-layout-content>
        </a-layout>
        <a-modal id="version-modal" v-model="versionModal.visible" title="{{ _('Switch xray version') }}"
                 :closable="true" @ok="() => versionModal.visible = false"
                 ok-text="{{ _('confirm') }}" cancel-text="{{ _('close') }}">
            <h2>{{ _('Click on the xray-core version you want to switch.') }}</h2>
            <h2>{{ _('Please choose carefully, the old version may be incompatible with the configuration.') }}</h2>
            <template v-for="version, index in versionModal.versions">
                <a-tag :color="index % 2 == 0 ? 'blue' : 'green'"
                       style="margin: 10px" @click="switchV2rayVersion(version)">
                    [[ version ]]
                </a-tag>
            </template>
        </a-modal>
    </a-layout>

{% endblock %}
{% block scripts %}
    {{ super() }}
    <script>

        let status = {
            v2: {
                color: '',
                stat: '{{ _('loading') }}',
            },
            uptime: '{{ _('loading') }}',
            cpu: { percent: 0 },
            memory: { percent: 0 },
            swap: { percent: 0 },
            disk: { percent: 0 },
            net_io: { up: '..', down: '..' },
            net_traffic: { sent: '..', recv: '..' },
            loads: ['..', '..', '..'],
            tcp_count: '..',
            udp_count: '..',
        };

        const versionModal = {
            visible: false,
            versions: [],
            show(versions) {
                this.visible = true;
                this.versions = versions;
            },
            hide() {
                this.visible = false;
            },
        };

        let app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data: {
                status,
                versionModal,
                spinning: false,
                loadingTip: '{{ _('loading') }}',
            },
            methods: {
                loading(spinning, tip = '{{ _('loading') }}') {
                    this.spinning = spinning;
                    this.loadingTip = tip;
                },
                getStatus() {
                    get({
                        url: '/server/status',
                        success: data => {
                            this.setStatus(data);
                        }
                    });
                },
                setStatus(status) {
                    switch (status.v2.code) {
                        case 0: status.v2.stat = '{{ _('running') }}'; status.v2.color = '#67C23A'; break;
                        case 1: status.v2.stat = '{{ _('not running') }}'; status.v2.color = '#E6A23C'; break;
                        default: status.v2.stat = '{{ _('error') }}'; status.v2.color = '#F56C6C';
                    }
                    status.uptime = formatSecond(status.uptime);
                    status.cpu.percent = status.cpu.percent.toFixed(2);
                    status.memory.percent = (status.memory.used / status.memory.total * 100).toFixed(2);
                    const swapPercent = status.swap.used / status.swap.total * 100;
                    status.swap.percent = isNaN(swapPercent) ? 0 : swapPercent.toFixed(2);
                    status.disk.percent = (status.disk.used / status.disk.total * 100).toFixed(2);
                    status.cpu.color = this.computeColor(status.cpu.percent);
                    status.memory.color = this.computeColor(status.memory.percent);
                    status.swap.color = this.computeColor(status.swap.percent);
                    status.disk.color = this.computeColor(status.disk.percent);
                    status.net_io.up = sizeFormat(status.net_io.up);
                    status.net_io.down = sizeFormat(status.net_io.down);
                    status.net_traffic.sent = sizeFormat(status.net_traffic.sent);
                    status.net_traffic.recv = sizeFormat(status.net_traffic.recv);
                    this.status = status;
                },
                computeColor(percent) {
                    if (percent < 80) {
                        return '#67C23A';
                    } else if (percent < 90) {
                        return '#E6A23C';
                    } else {
                        return '#F56C6C';
                    }
                },
                openSelectV2rayVersion() {
                    this.loading(true);
                    get({
                        url: '/server/get_v2ray_versions',
                        success: data => {
                            this.loading(false);
                            if (!data.success) {
                                return;
                            }
                            versionModal.show(data.obj);
                        },
                        error: () => {
                            this.loading(false);
                        },
                    });
                },
                switchV2rayVersion(version) {
                    this.$confirm({
                        title: '{{ _('Switch xray version') }}',
                        content: '{{ _('Are you sure you want to switch to xray') }}' + ` ${version}?`,
                        okText: '{{ _('confirm') }}',
                        cancelText: '{{ _('cancel') }}',
                        onOk: () => {
                            versionModal.hide();
                            this.loading(true, '{{ _('installing, please do not leave this page.') }}');
                            post({
                                url: `/server/install_v2ray/${version}`,
                                success: () => {
                                    this.loading(false);
                                },
                                error: () => {
                                    this.loading(false);
                                },
                            });
                        },
                    });
                },
            },
            mounted() {
                this.setStatus({{ status | safe }});
                setInterval(this.getStatus, 2000);
            },
        });

    </script>
{% endblock %}